<template>
  <!-- Excel前端导入组件 -->
  <el-dialog
    :title="$t(uploadParams.title)"
    v-model="dg.open"
    append-to-body
    class="app-dialog-container"
    @close="handleClose"
    align-center
    destroy-on-close
    draggable>
    <div v-szd-dialog="[uploadParams.dialogWidth, uploadParams.dialogHeight]" />
    <el-upload ref="refUploadExcel" accept=".xls,.xlsx" action="" :auto-upload="false" :disabled="dg.disabled" @change="handleChange" drag>
      <!-- 拖拽导入 -->
      <div>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          {{ $t("将文件拖到此处，或") }} <em>{{ $t("点击上传") }}</em>
        </div>
        <!-- 导入文件提示信息 -->
        <div v-if="uploadParams.acceptTxt" class="el-upload__tip" style="color: red">
          {{ uploadParams.acceptTxt }}
        </div>
      </div>
    </el-upload>

    <template #footer>
      <szd-button label="下载模板" type="primary" @click="handleDownloadTM" />
      <szd-button label="取消" type="primary" @click="handleCloseForm" />
    </template>
  </el-dialog>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { $t } from "../../common/utils/globalConfig";
  import szdExcel from "../../common/tools/excel";

  const props = defineProps({
    updParams: {
      type: Object,
      default: {}
    },
    fCats: {
      type: Object,
      default: []
    }
  });

  const emit = defineEmits(["uploadResult", "closeDialog"]);
  //上传文件控件
  const refUploadExcel = ref();

  //窗口对象
  const dg = ref({
    open: false,
    disabled: false
  });

  //上传参数
  const uploadParams = ref({
    acceptTxt: "", //提示信息
    TMCode: "", //下载模板
    fileName: "", //文件名
    title: "", //标题
    dialogWidth: 300, //窗口宽度
    dialogHeight: 300 //窗口高度
  });

  onMounted(() => {
    initUploadParam(props.updParams);
  });

  //初始化上传参数
  const initUploadParam = infoParam => {
    initData();
    if (infoParam.acceptTxt) uploadParams.value.acceptTxt = infoParam.acceptTxt;
    if (infoParam.TMCode) uploadParams.value.TMCode = infoParam.TMCode;
    if (infoParam.fileName) uploadParams.value.fileName = infoParam.fileName;
    if (infoParam.title) uploadParams.value.title = infoParam.title;
    if (infoParam.dialogWidth && infoParam.dialogWidth > 10) uploadParams.value.dialogWidth = infoParam.dialogWidth;
    if (infoParam.dialogHeight && infoParam.dialogHeight > 10) uploadParams.value.dialogHeight = infoParam.dialogHeight;
    dg.value.open = true;
  };

  //下载模版
  const handleDownloadTM = () => {
    szdExcel.exportTemplate(props.fCats, uploadParams.value.TMCode, uploadParams.value.fileName);
  };

  //上传文件
  const handleChange = (file, files) => {
    let rows = [];
    dg.value.disabled = true;
    szdExcel.uploadData(props.fCats, rows, file).then(res => {
      dg.value.open = false;
      emit("uploadResult", rows);
    });
  };

  //初始化数据
  const initData = () => {
    dg.value.disabled = false;
    uploadParams.value = {
      acceptTxt: "", //提示信息
      TMCode: "", //下载模板
      fileName: "", //文件名
      title: "", //标题
      dialogWidth: 300, //窗口宽度
      dialogHeight: 300 //窗口高度
    };
  };

  const handleCloseForm = () => {
    dg.value.open = false;
  };

  const handleClose = () => {
    refUploadExcel.value.clearFiles();
    emit("closeDialog");
  };
</script>
